<template>
  <el-main>


    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="收房合同号" prop="contractNo">
        <el-input v-model="ruleForm.contractNo" disabled style="width: 120px"></el-input>
        <el-button type="primary" @click="contractQuery">收房合同查询</el-button>
      </el-form-item>
      <el-form-item label="房产信息" prop="contractId">
        <el-input v-model="ruleForm.houseName" disabled style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="ownerName">
        <el-input v-model="ruleForm.ownerName" disabled style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item label="业主手机号" prop="signUserMobile">
        <el-input v-model="ruleForm.signUserMobile" disabled style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item label="账期" prop="payNumber">
        <el-select v-model="ruleForm.payNumber" placeholder="请选择账期" style="width: 120px">
          <el-option :label="item.name" :value="item.id" v-for="item in paymentAll"></el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="新增款项">
        <el-button type="primary" @click="addDomain">新增域名</el-button>
      </el-form-item>
      <el-form :model="dynamicValidateForm" :inline="true" ref="dynamicValidateForm" label-width="100px"
               class="demo-dynamic">
        <el-form-item
          v-for="(domain, index) in dynamicValidateForm.domains"
          label="费用类型"
          :key="index">
          <el-select v-model="domain.itemType" placeholder="请选择">
            <el-option :label="item" :value="item" v-for="item in itemTypeAll"></el-option>
          </el-select>
          应付金额
          <el-input v-model="domain.paymentAmount" style="width: 120px"></el-input>
          实付金额
          <el-input v-model="domain.realPaymentAmount" style="width: 120px"></el-input>
          <el-button @click.prevent="removeDomain(index)" v-if="index!=0">删除</el-button>
        </el-form-item>
      </el-form>


      <el-form-item label="付款状态" prop="payState">
        <el-radio-group v-model="ruleForm.payState">
          <el-radio :label="item" v-for="item in payStateAll"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="ruleForm.remark"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="save('ruleForm')">添加</el-button>
        <el-button @click="resetForm">清空</el-button>
      </el-form-item>
    </el-form>


    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose">


      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="小区名称">
          <el-input v-model="formInline.premiseName" placeholder="小区名称"></el-input>
        </el-form-item>
        <el-form-item label="业主姓名">
          <el-input v-model="formInline.ownerName" placeholder="业主姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="contractQuery">查询</el-button>
        </el-form-item>
      </el-form>

      <template>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="ownerName"
            label="业主姓名"
            width="180">
          </el-table-column>
          <el-table-column
            label="房产信息"
            width="180">
            <template slot-scope="scope">
              {{ scope.row.premiseName }}({{ scope.row.houseName }})
            </template>
          </el-table-column>
          <el-table-column
            prop="conSignTime"
            label="签约日期"
            width="180">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handlePitch(scope.row)" type="text">选中
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>


      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formInline.pageNum"
        :page-sizes="[1, 2, 3, 4]"
        :page-size="formInline.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>


      <span slot="footer" class="dialog-footer">
  </span>
    </el-dialog>

  </el-main>
</template>

<script>
import {apiGetMsg, contractQuery, itemTypeList, save} from "@/api/finance/addpayplan/add";

import {payStateList} from "@/api/finance/payment/finance";

export default {
  data() {
    return {
      //添加提交数据
      ruleForm: {
        contractNo: null,
        houseName: null,
        contractId: null,
        ownerName: null,
        signUserMobile: null,
        costTypes: [],
        remark: null
      },
      //正则
      rules: {
        contractNo: [
          {required: true, message: '请输入收房合同号', trigger: 'blur'}
        ],
        contractId: [
          {required: true, message: '请输入房产信息', trigger: 'blur'}
        ],
        ownerName: [
          {required: true, message: '请输入业主姓名', trigger: 'blur'}
        ],
        signUserMobile: [
          {required: true, message: '请输入业主手机号', trigger: 'blur'}
        ],
        payNumber: [
          {required: true, message: '请选择账期', trigger: 'change'}
        ],
        payState: [
          {required: true, message: '请选择付款状态', trigger: 'change'}
        ]
      },
      //查询条件数据
      formInline: {
        pageNum: 1,
        pageSize: 2
      },
      total: null,
      dialogVisible: false,
      tableData: [],
      //账期
      paymentAll: [
        {id: 1, name: '第一期'},
        {id: 2, name: '第二期'},
        {id: 3, name: '第三期'}
      ],
      //付款状态
      payStateAll: [],
      //费用类型
      itemTypeAll: [],
      dynamicValidateForm: {
        domains: [
          {
            itemType: null,
            paymentAmount: null,
            realPaymentAmount: null,
          }
        ]
      },
    }
  },
  methods: {
    //收房合同查询
    contractQuery() {
      contractQuery(this.formInline).then(res => {
        console.log(res)
        this.tableData = res.list
        this.total = res.total
        this.dialogVisible = true
      })
    },
    //选中方法
    handlePitch(row) {
      this.ruleForm = row;
      this.dialogVisible = false
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },
    handleSizeChange(val) {
      this.formInline.pageSize = val
      this.formInline.pageNum = 1
      this.contractQuery();
    },
    handleCurrentChange(val) {
      this.formInline.pageNum = val
      this.contractQuery();
    },
    //付款状态
    payStateList() {
      payStateList().then(res => {
        this.payStateAll = res
      })
    },
    //费用类型
    itemTypeList() {
      itemTypeList().then(res => {
        this.itemTypeAll = res
      })
    },
    removeDomain(index) {
      this.dynamicValidateForm.domains.splice(index, 1)
    },
    addDomain() {
      this.dynamicValidateForm.domains.push({
        itemType: null,
        paymentAmount: null,
        realPaymentAmount: null,
      });
    },
    save(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ruleForm.costTypes = this.dynamicValidateForm.domains;
          save(this.ruleForm).then(res => {
            console.log('submit!!');
            this.$router.push("/finance/payment")
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm() {
      this.dynamicValidateForm.domains = [{
        itemType: null,
        paymentAmount: null,
        realPaymentAmount: null,
      }]
      this.ruleForm.remark = null
    }
  },
  created() {
    this.payStateList();
    this.itemTypeList();
    let id = this.$route.query.id;
    console.log(id)
    if (id == 0) {
      console.log('添加')
    } else {
      console.log('修改')
      let formData = {
        id: id
      }
      apiGetMsg(formData).then(res => {
        console.log(res);
        this.ruleForm.contractNo = res.msgData.cfContractNo;
        this.ruleForm.ownerName = res.msgData.tenantName;
        this.ruleForm.houseName = res.msgData.roomName;
        this.ruleForm.signUserMobile = res.msgData.tenantPhone;
        console.log(this.ruleForm);
      })

    }
  }
}
</script>

<style scoped>

</style>
